nwtgck: Webブラウザ上で純粋なHTTPだけで単方向リアルタイム通信を可能にするHTTPのストリーミングアップロードが遂にやってくる

数行で画面共有したり、世界一シンプルかもしれないテキストチャットなども紹介したい。

https://gyazo.com/37a9d37fee6aa495f17bbe83857d913e

なぜHTTPでのストリーミングアップロード？

巨大なデータの暗号化・圧縮

終わりが決まっていない無限のデータ

などをサーバーにアップロードすることがある。

なぜHTTPか？

HTTPはとてもシンプル。

HTTP/1.1は成熟して枯れた技術で、

HTTPは新しい技術がとりまれてこれからも互換性を保ちつつ発展している。

そしてWebブラウザは多くのデバイスにすでにインストールされている。このWebブラウザでHTTPのボディをストリーミングしてアップロードする機能が搭載されることでさまざな用途での可能性が広がる。

どういう機能なのか？

code:js

fetch(myUrl, {

method: 'POST',

body: <ここにReadableStream>

})

fetch()

ReadableStream

例えば以下で無限の乱数バイト列を出し続けるストリームが作れる。

code:js

// 無限の乱数バイト列

new ReadableStream({

pull(ctrl) {

ctrl.enqueue(window.crypto.getRandomValues(new Uint32Array(128)));

}

})

主要ブラウザベンダーの関心

https://gyazo.com/aa7d3bba8a99e677573925bccfc2175a

MDNでの記述

https://gyazo.com/594dbd91d89f84e471f876d264ccc4d8

Google Chromeで実際に使う

https://gyazo.com/561cca07e57978fbc8e5b816111dc672

テキストチャットを作る

もしかすると世界一シンプルかもしれないブラウザでできる簡易テキストチャット。日本語や絵文字送れる。

左側が送る人、右側が受け取る人。もう1組作れば右側から送ることもできる。

https://gyazo.com/ef19138393e00f7f370461fb909dbf07

以下がコード。

code:js

const readableStream = new ReadableStream({

start(ctrl) {

const encoder = new TextEncoder();

window.myinput.onkeyup = (ev) => {

if (ev.key === 'Enter') {

ctrl.enqueue(encoder.encode(ev.target.value+'\n'));

ev.target.value = '';

}

}

}

});

method: 'POST',

body: readableStream,

headers: { 'Content-Type': 'text/plain;charset=UTF-8' },

allowHTTP1ForStreamingUpload: true,

});

画面共有を作る

以下のように画面がvideo_player.htmlを開いているブラウザに共有できている。これも標準ライブラリのみを使っている。

https://gyazo.com/37a9d37fee6aa495f17bbe83857d913e

以下が画面を送りたい側のコード。

以下のほとんどはMediaStreamをReadableStreamに変換するコードが占めている。

code:js

(async () => {

// Get display

const mediaStream = await navigator.mediaDevices.getDisplayMedia({video: true});

// Convert MediaStream to ReadableStream

const readableStream = mediaStreamToReadableStream(mediaStream, 100);

method: 'POST',

body: readableStream,

allowHTTP1ForStreamingUpload: true,

});

})();

// Convert MediaStream to ReadableStream

function mediaStreamToReadableStream(mediaStream, timeslice) {

return new ReadableStream({

start(ctrl){

const recorder = new MediaRecorder(mediaStream);

recorder.ondataavailable = async (e) => {

ctrl.enqueue(new Uint8Array(await e.data.arrayBuffer()));

};

recorder.start(timeslice);

}

});

}

上記でやっていることは、

そのMediaStreamをReadableStreamに変換してfetch()でPOSTする。

以下は画面を見る側のコード。videoタグのみ。

code:html

コマンドラインとの高い親和性

上記はvideoタグで閲覧した。その代わりにffplayを使えばコマンドライン上で閲覧することができる。

code:bash

https://youtu.be/oORveGAFrt0

fetch()でReadableStreamがPOSTできるようになって、WebブラウザからのPOSTを受信して表示することも、コマンドラインから画面共有してブラウザ表示することでもできるようになった。

音声通話・ビデオ通話などなど

Webブラウザ標準で音声やinカメラなどからのMediaStreamを取得できる。

嬉しいことに、多くのモバイルでのブラウザでも対応している。

code:js

// 音声

navigator.mediaDevices.getUserMedia({ audio: { echoCancellation: true } })

code:js

// ビデオ + 音声

navigator.mediaDevices.getUserMedia({ video: true, audio: { echoCancellation: true } })

以下がコード。

映像にフィルタをつける

https://youtu.be/VcKJR8D8IFA

以下の関数はインメモリでvideoやcanvasを作って引数のMediaStreamを加工してMediaStreamを返す。

code:js

// ...略...

// セピア調にするフィルタ

async function sepiaMediaStream(mediaStream) {

const memVideo = document.createElement('video');

memVideo.srcObject = mediaStream;

await memVideo.play();

const width = memVideo.videoWidth;

const height = memVideo.videoHeight;

const srcCanvas = document.createElement('canvas');

const dstCanvas = document.createElement('canvas');

srcCanvas.width = dstCanvas.width = width;

srcCanvas.height = dstCanvas.height = height;

const srcCtx = srcCanvas.getContext('2d');

const dstCtx = dstCanvas.getContext('2d');

(function loop(){

srcCtx.drawImage(memVideo, 0, 0, width, height);

const frame = srcCtx.getImageData(0, 0, width, height);

JSManipulate.sepia.filter(frame);

dstCtx.putImageData(frame, 0, 0);

setTimeout(loop, 0);

})();

return dstCanvas.captureStream();

}

canvasの可能性

可能性として、カメラからのMediaStreamを加工すれば、SnowやSnap CameraのようなフィルタをWebのクライアントサイドで作ることもできるはず。

またcanvasは色々できる。

これらcanvasに描画したものをMediaStreamで取得してリアルタイムで送信できる。

エンドーツーエンド暗号化で画面共有

https://youtu.be/lxpxeB_0UDk

以下の関数で任意のreadableStreamをpasswordで暗号化できる。

code:js

// Encrypt ReadableStream with password by OpenPGP

async function encryptStream(readableStream, password) {

const options = {

message: openpgp.message.fromBinary(readableStream),

armor: false

};

const ciphertext = await openpgp.encrypt(options);

return ciphertext.message.packets.write();

}

実際のコードは以下にある。

圧縮

https://gyazo.com/b80ce27065ec3e9ed79c2195d49b6376

code:js

const readableStream = new ReadableStream({

pull(ctrl) {

// random bytes

ctrl.enqueue(window.crypto.getRandomValues(new Uint32Array(128)));

}

}).pipeThrough(new CompressionStream('gzip'))

method: 'POST',

body: readableStream,

allowHTTP1ForStreamingUpload: true,

});

無限にランダムなバイト列を圧縮したバイト列を送信している。

ReadableStreamから得たバイト列を圧縮する実装をすればgzipに限らず色々な圧縮ができると思う。

HTTPのアップロードの読み取りの進捗

https://gyazo.com/24d9ddd32f147e0fe681d807a2bc1734

それをReadableStreamがアップロードできることで"多少"可能にすることができるようになった。

以下のようにchunk.byteLengthを数えるやりかた。

code:js

// 進捗付きにする

const readableStreamWithProgress = readableStream.pipeThrough(progressStream(loaded => {

const progress = window.progress_bar.value = loaded / file.size * 100;

}));

// ...省略...

function progressStream(callback) {

let loaded = 0;

callback(loaded);

return new TransformStream({

transform(chunk, ctrl) {

ctrl.enqueue(chunk);

loaded += chunk.byteLength;

callback(loaded);

}

});

}

注意点は、あくまでも読み取ったバイト数であり、アップロード済みのバイト数ではないこと。

fetch()がReadableStreamをアップロードできるかの判定

以下のようにしてこの機能に対応しているブラウザかどうか判定できる。

code:js

const supportsRequestStreams = !new Request('', {

body: new ReadableStream(),

method: 'POST',

}).headers.has('Content-Type');

任意のプロトコル

任意のReadableStreamを流し込める。任意のバイト列でも転送できる。つまり任意のプロトコルのバイト列を流し込むこともできる。

つまり、WebブラウザサイドでSSHクライアントを実装できれば、原理上HTTPだけでSSHができるなどの可能性がある。その他にもVNCクラインとが作れれば、リモート操作などもできるかもしれない。

現在のChromeでは双方向は制限されている

まとめ

fetch()でReadableStreamをアップロード出来るようになった。

ReadableStreamが使えることで、すべてをメモリ上に展開せずに済み、巨大・無限のデータを転送できる。

ReadableStreamは圧縮・暗号化など加工することができる。

<canvas>や画面や音声やカメラなどをReadableStreamにしてHTTPで転送できる。

サンプルコードの使い方

このページは以下のサンプルコードをリンクした。

おまけ